<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vis Network | Node Styles | HTML in Nodes</title>

    <style type="text/css">
      body {
        font: 10pt arial;
      }
      #mynetwork {
        width: 600px;
        height: 600px;
        border: 1px solid lightgray;
        background-color: #eeeeee;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script type="text/javascript">
      var nodes = null;
      var edges = null;
      var network = null;

      var DIR = "img/refresh-cl/";
      var LENGTH_MAIN = 150;
      var LENGTH_SUB = 50;

      var svg =
        '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' +
        '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
        '<foreignObject x="15" y="10" width="100%" height="100%">' +
        '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
        " <em>I</em> am" +
        '<span style="color:white; text-shadow:0 0 20px #000000;">' +
        " HTML in SVG!</span>" +
        "</div>" +
        "</foreignObject>" +
        "</svg>";

      var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);

      // Called when the Visualization API is loaded.
      function draw() {
        // Create a data table with nodes.
        nodes = [];

        // Create a data table with links.
        edges = [];

        nodes.push({ id: 1, label: "Get HTML", image: url, shape: "image" });
        nodes.push({ id: 2, label: "Using SVG", image: url, shape: "image" });
        edges.push({ from: 1, to: 2, length: 300 });

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {
          physics: { stabilization: false },
          edges: { smooth: false },
        };
        network = new vis.Network(container, data, options);
      }
    </script>
  </head>

  <body onload="draw()">
    <p>
      This example demonstrates showing custom HTML in Nodes, by using an SVG
      image.
    </p>
    <p style="color: red">
      WARNING: this is currently not supported by all browsers.
    </p>
    <div id="mynetwork"></div>
  </body>
</html>
